<template>
  <div>
      <div class="goodslist">
          <div class="mui-card" v-for="(item, i) in shopcarlist" :key="item.id">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <mt-switch v-model="$store.getters.getgoodsSelected[item.id]" @change="updateSelected(item.id,$store.getters.getgoodsSelected[item.id])"></mt-switch>
              <img :src="item.thumb_path" alt="">
              <div class="info">
                <h1>{{item.title}}</h1>
                <p>
                  <span class="price">￥{{item.sell_price}}</span>
                  <numbox style="height:25px" :initcount="$store.getters.getcount[item.id]" :id="item.id"></numbox>
                  <a href="#" @click.prevent="remove(item.id,i)">删除</a>
                </p>
              </div>
            </div>
          </div>
          </div>
        <!-- 结算区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner jiesuan">
            <div>
              <p>总计（不含运费）</p>
              <p>已勾选商品： <span class="red">{{$store.getters.getSelectedAndamount.totalCount}}</span> 件，
                总计：  <span class="red">￥{{$store.getters.getSelectedAndamount.amount}}</span>  元
              </p>
            </div>
              <mt-button type="danger" >去结算</mt-button>
					</div>
				</div>
			  </div>
      </div>
  </div>
</template>

<script>
import numbox from '../subcomponent/shopcar_numbox.vue'
export default {
  data(){
    return {
      shopcarlist:[],//存放购物车里面的数据
    }
  },
  created(){
    this.getshopcarlist()
  },
  methods:{
    getshopcarlist(){
      var idArr=[];
      this.$store.state.car.forEach(item =>{//拿到所有商品的id
        idArr.push(item.id)
      })
      //如果没有有商品，就不调用接口
      if(idArr.length<=0){return }
      this.$http.get("api/goods/getshopcarlist/"+idArr.join(",")).then(result =>{
        if(result.body.status===0){
          this.shopcarlist=result.body.message
        }
      } )

     
    },
    remove(id,index){//点击删除商品
      //根据索引删除购物列表
      this.shopcarlist.splice(index,1)
      //对应store中也要删除，本地存储也要更新
      this.$store.commit("removeGoodsFromCar",id)
    },
    updateSelected(id,val){//勾选状态的改变
     // console.log(id+"---"+val)
      this.$store.commit("updateSelected",{id:id,selected:val})
    }
  },
  components:{
    numbox
  }
}
</script>

<style lang="less" scoped>
.goodslist{
  background-color: #ddd;
  overflow: hidden;
  .mui-card-content-inner{
    display: flex;
    img{
     // width: 60px;
      height: 60px;
    }
    h1{
      font-size:13px;
    }
    p{
      margin-top:10px;
      .price{
        color:red;
      }
     
      a{
        color:blue;
      }
    }
   
  }
}
 .jiesuan{
   display: flex;
   justify-content: space-between;
   align-items: center;
   .red{
     color:red;
     font-weight: bold;
   }
}
</style>
